System and method for automated color scheme transformation

ABSTRACT

Embodiments of the present invention provide a system, computer-readable medium and a method for transforming a color scheme. A processor is configured to retrieve from storage data including content elements defining a user interface screen in response to a user selection of a source color and a replacement color. For each content element of the user interface screen, a color of the content element is compared the source color. Based on the comparison, if the color of the content element falls within a predetermined threshold distance of the source color along a color palette, the color of the content element can be converting to the replacement color. After the processing of the content elements, the user interface is displayed on a display device, including the converted color element(s).

BACKGROUND

The present invention relates to techniques for modifying userinterfaces of computer programs autonomously to change the look and feelof the user interfaces.

Modern businesses often maintain computer networks on which a variety ofapplication programs execute. The businesses often create a brandpresence which includes stylized logos and a recognizable color scheme.These businesses often attempt to impose their color scheme to the userinterfaces of the applications executing on their networks. Since thebusinesses may not author the applications that run on their networks,it can be a difficult undertaking to alter the color scheme of thecomputer application after it has been installed at the user location.

Color transformation schemes are well known. Typically, they involve aselection of a discrete set of reference colors and identification ofother colors that will replace them. However, the implementations ofuser controls and other mechanisms often require a number of inputoperations, are tedious to use, and require frequent repetition of stepsto make even the slightest transformations to the color scheme of acomputer application. The inventors recognized a need for a moreefficient automated color transformation method and system.

BRIEF DESCRIPTION OF THE DRAWINGS

FIG. 1. illustrates an exemplary system for implementing a colortransformation application according to an embodiment of the presentinvention.

FIG. 2 illustrates an exemplary flowchart of a method according to anembodiment of the present invention.

DETAILED DESCRIPTION

Embodiments of the present invention provide a computer implementedmethod for transforming colors of a predefined user interface. Themethod may operate on a source color that is selected by a user from acolor palette and also on a replacement color designated by a user. Whena new user interface screen is retrieved from memory and prior to itsdisplay, the method may review content of the user interface anddetermine, for each content element therein, whether the color of thecontent element falls within a predetermined threshold distance of theselected source color on the color palette. If so, the content elementis converted from its original color to the replacement color. Once theentire user interface is processed and conversion operations arecompleted, it may be rendered on a display device.

An alternative embodiment of the present invention may convert contentelements in a graduated manner. According to the alternative embodiment,if the color of a content element falls within a predetermined distanceof the source color, the content element's color may be converted. Themethod may determine a distance vector separating the content element'scolor from the source color along the color palette. The contentelement's color may be converted to a new color which is separated fromthe replacement color by the same distance vector. Once the entire userinterface is processed and conversion operations are completed, it maybe rendered on a display device.

An embodiment of the present invention provides a system fortransforming a color scheme of content elements to be presented in auser interface. The exemplary embodiment includes a client computer anda server. A display device is connected to the client computer, and theserver includes a processor. The processor is configured to executecomputer program instructions to implement the above described methods.

Another embodiment of the present invention provides a system fortransforming a color scheme of content elements to be presented in auser interface. The exemplary embodiment includes a client computer, adisplay device and an input device that are connected to the clientcomputer, and a server that provides content elements to the clientcomputer. The client computer includes a processor. The processor isconfigured to execute computer program instructions to implement theabove described method.

An embodiment of the present invention provides for a machine-readablemedium embodied with computer program instructions that cause aprocessor to execute the computer program instructions to perform thefunctions of execute computer program instructions to implement thefunctions of the above described method.

FIG. 1 illustrates a system for implementing a color transformationscheme according to an embodiment of the present invention. Computersystem 100 may include terminal(s) 110, network 120 and servers 130.Terminals 110 can be client computers at a plurality of locationscoupled to the network 120. The terminals 110 can include processors112, machine-readable data storage 111, e.g., databases, read onlymemory, random access memory or other computer-readable data storagedevices, and display devices 113. The processor 112 can executed browserapplication or other user interface application on the display device.The machine-readable data storage 111 can store computer programinstructions executable by a processor 112. The machine-readable storagemedia 111 can include hard disks, magnetic tapes, RAID, computer discs,such as CDs and DVDs, flash memory or other suitable storage media. Theterminals 110 can be a desktop computer, a laptop computer, a netbookcomputer, a personal digital assistant, a cellular device or aweb-enabled wireless device.

The network 120 can be any form of network, such as the Internet, aproprietary network, a wide area network, a local area network, ametropolitan area network, a wired network, a wireless network, acellular network, a telephone network, or any combination thereof.

Servers 130 can include processors 131 coupled to databases or othermachine-readable storage media, such as disks, magnetic tapes, RAID orother suitable storage media. The servers 130 can perform functionscommonly performed by servers.

A server 130 or a client terminal 110 can have a variety of softwarelayers, such as a user interface layer 140 and an application layer 150,and others. The variety of software layers can be hosted on the server130, the client terminal 110 (as shown in phantom), or a combination ofboth.

The user interface layer 140 can include a user interface manager 142, atransform manager 143, and a user profile 145. The user interface layer140 can make the resources in the application layer 150 accessible fromeither servers 130 or from machine-readable media 111 requested by theclient 110. The user interface layer 140 can control the interactionbetween the client 110 and the applications executing on the servers 130or the client 110 as made available by the application layer 150.

The user interface manager 142 can facilitate communication between theclient terminal 110, the network 120, and the servers 130. The userinterface manager 142 can call different computer software resourcesfrom the servers 130 or machine-readable storage 111 based on therequests received from the client 110. For example, the user interfacemanager 142 can call the transform manager 143. The transform manager143 can be a computer service that provides color transformationfunctions to the user interface manager 142. Optionally, the transformmanager 142 can access a user profile related to the colortransformation/conversion function specific to a user of the client 110from a data storage device. The color transformation/conversionfunctions of the transform manager 143 and the user profile 145 will bedescribed in more detail with reference to FIG. 2.

The application layer 150 can have a plurality of computer applicationsand associated data sources 151. The plurality of computer applicationscan access the associated data sources, which may or may not be locatedin a single data storage or a plurality of data storage devices, toprovide user interface content elements for presentation on a clientterminal 110. The computer applications can be any type of computerapplication, such as an enterprise relationship management application,supplier relationship management application, or a customer relationshipmanagement application, that presents data on a display device. The userinterface content elements (UI elements) can form data presentations 161a and 161 b when presented on a display device. For example, the datapresentations 161 a and 161 b can be displayed as banners, logos,borders, pictures, graphics, animations, documents, charts, graphs, mapsor any other form of data presentation, when the content elements arerendered.

The operation of the above described elements to provide a color schemetransformation/conversion will now be described with reference to FIG.2.

FIG. 2 illustrates an exemplary flowchart of a method according to anembodiment of the present invention. The exemplary process 200 fortransforming a color scheme of a browser user interface presented on aclient display device will now be described in more detail. Colors canbe represented by numerical values, such as binary values,alphanumerical, such as orange or hexadecimal values, a symbol, acombination of these, or any other representation of a color. In thisapplication, the term “colors” refers to these representations.

A user interface can be presented in a browser window. The browserwindow can be formed from a number of content elements that containcolors. These colored content elements can simply be textual graphics orpictures (e.g., icons, photographs, animations or other coloredidentifiers) have a variety of file formats such as GIF, TIFF, BMP and.png), cascaded style sheets, HTML or other files. Portions of thebrowser fields are specified by style sheets. The style sheets can beanalyzed, for example, to identify whether a portion of the userinterface is assigned a particular color, and will also identifyportions of the user interface that has been assigned to display apicture. In the style sheet, the location of a picture can berepresented by a uniform resource locator (URL). When the browser isbuilding the user interface, it will use the URL from the style sheet tofetch the picture for rendering in the user interface. Therefore, abrowser may process a number of different file types when rendering theuser interface.

The color transformation process 200 involves a client, such as clientterminal 110 of FIG. 1, making a request (Step 203) that will be handledby a user interface manager that can be either in the client terminal ora server, such as server 140. The request can be for a computerapplication 151, such as a customer relationship management computerapplication, and/or for data, such a document, supported by a computerapplication.

In response to the request from a client, a file can be retrieved, forexample, by the user interface manager 142, from an application or datasource. The retrieved file can be used for rendering a user interface bya browser to access a computer application. The user interface for thecomputer application 151 can be formed from content elements that can bestored in a file, such as .GIF, TIFF, JPEG, .BMP and the like. Thesefile types can be stored in a cascading style sheet within the HTML pagethat is to be rendered by the user interface. The style sheet caninclude images, such as icons or photographs and the like. The fileformat of the images determines the where in the file a color tablecontaining values colors will be stored. Access to the color table isobtained by following the conventions of the file format. Once the fileis loaded and opened, the color table is analyzed for the source color.

The requested computer application and/or the data typically will bereturned to a browser running on the client, and presented in a userinterface on a display device of the client. However, prior to beingsent to the browser for generating the user interface, the file isintercepted or diverted, at step 205, for example, by the user interfacemodule 142 or the transform manager 143, from being directly sent to abrowser and presented on the display device of a client.

The intercepted file is analyzed by the transformation manager 143. Atstep 210, the content elements in the requested file can be analyzed. Acontent element can be a direct reference to a source color in theretrieved file (i.e., black or gold), or can be an indirect reference,such as a URL, to a secondary file location. The secondary filesidentified by the URL can be of a specific type, such as a GIF, TIFF, orJPEG. The file from the URL location is retrieved, for example, by thetransform manager 143, the content elements in the file can be analyzedto determine if it directly refers to colors or to reference files thatmay contain colors. The retrieved file, such as a style sheet, may referdirectly to a color, or may have a URL to identify the location of asecondary file, or contain a combination of direct references to colorsand additional secondary files. The transform manager 143 can determinethe type of the secondary file, e.g., GIF, TIFF, or JPEG, specified inthe URLs, and based on the file type, knows the location of color datain the file structure. The color data can typically be found in a colortable configured according the specification for the file type. Thetransform manager 143 can access either directly the retrieved contentelement, or when the content element is a secondary file, the color datainformation in a color table.

Upon obtaining the color data of the content element, the color data canbe further analyzed, for example, by the transform manager 143. Using alook-up table or a similar mechanism, the color data can be compared toblacklisted colors. (Step 220). Blacklisted colors are colors, orcombinations and arrangements of colors that are not permitted to betransformed. For example, a user may not want the Flag of The UnitedStates, or a company logo, such as the SAP logo, to be converted, andthen the content element containing the arrangement and combination ofcolors, or an identifier of the Flag of The United States can be addedto the blacklist look-up table.

If the content element is blacklisted, or not permitted to be converted(transformed), the content element is skipped. The process 200 returnsto step 210, where the next content element is retrieved, and theanalysis of whether the content element is permitted to be converted canbe repeated.

However, if the content element is not blacklisted, then the processproceeds to step 230.

At step 230, a first of each color, that is permitted to be transformed,in a content element is reviewed to determine if it is a source colorwhich is to be transformed to a replacement color. The replacementcolors can be selected by a user prior to step 203 from a color palettethat was previously presented to a user. Or the replacement colors canbe selected from a database, such as user profiles 145, whenever a fileis requested by a user. If the color does not match the source color, itis determined at step 233 whether this is the last color in the contentelement. If it is not the last color in the content element, the nextcolor of the content element is examined. If it is the last color, theprocess moves to block 240.

If the color matches the source color, the color is transformed to thereplacement color at step 235. The values of the transformed colors canbe stored back in the color table or into the content element. Theprocess 200 checks at 237 whether this is the last color in the contentelement. If it is not the last color, the next color is analyzed at step230, and the above steps are repeated for the next color in the contentelement. If it is the last color, the process 200 proceeds to step 240.

Once the color has been transformed from the source color to thereplacement color, the transformed colors, i.e. color values, can bestored in the color table of the content element, or the style sheetsettings of the content element are changed to indicate the transformedcolor, the converted content element containing the transformed color issent to the client for rendering by a browser, step 240, or similar userinterface. The transformed content element in the file can be stored inthe browser cache for later reuse.

Optionally, after the transformation of the colors, the files containingthe transformed content elements can be stored in the user profiledatabase 145 for future use and/or reference.

A user can select automatic transformation of the color scheme in fourdifferent scenarios: a single source color transformation, a singlesource color with a threshold transformation, multiple source colortransformations, and multiple source colors with a thresholdtransformation. The four scenarios range in complexity from thesimplest, the single source color, to the more complex, multiple sourcecolors with a threshold.

The mathematics associated with performing the color transformation willnow be described in more detail. In the single source colortransformation, the user can pick a single color from the source colorscheme that has a plurality of source colors. After selecting the sourcecolor, the user using a color palette or some other input control canselect a target replacement color to which the selected source colorwill be transformed. All source colors will also be transformed based onthe selected target replacement color. In the single source colortransformation, the selected source color is transformed directly to theselected target replacement color. Similarly, all other colors of thesource color scheme should be transformed to a representative targetreplacement color. Using a distance formulation, source colors that arefurther away in the color space from the selected target replacementcolor are not transformed so much that the colors are either too dark ortoo bright. For example, the transformation can be performed based onthe color space HSL (Hue, Saturation and Lightness) as is well-known inthe art for its computational ease. Of course, the HSV or any othercolor space can be used. In the HSL color space, the hue H starts atapproximately the color red, which is equated to a value of 0 degrees,and passes 360 degrees through the colors orange, yellow, green, blueand purple to return the color red at 0 degrees. So hue H can be given avalue between 0 and 360, while saturation S and lightness L are in therange between 0 and 1.

A suitable transformation Trans(S_(B), T_(B), S_(X))→T_(x) is defined asfollow:

Delta_(—) H:=H _(—) T _(B) −H _(—) S _(B)—The difference in hue betweenthe source and the target replacement color.

Delta_(—) S:=S _(—) T _(B) −S ⁻ S _(B)—The difference in saturationbetween the source and the target replacement color.

Delta_(—) L:=L _(—) T _(B) −L _(—) S _(B)—The difference in lightnessbetween the source and the target replacement color.

The hue of the target replacement color obtained by transforming thecolor is:

H _(—) T _(x):=(H _(—) S _(x)+Delta_(—) H)modulo360.

The saturation of the target replacement color obtained by transformingthe color is:

S _(—) T _(x) :=S _(—) S _(x)+buffer(S _(—) S _(x),Delta_(—) S,S _(—) S_(B))−

where If S_T_(x)>1 then S_T_(x):=1 else if S_T_(x)<0 then S_T_(x):=0.The lightness of the target replacement color obtained by transformingthe color is:

L _(—) T _(x) :=L _(—) S _(x)+buffer(L _(—) S _(x),Delta_(—) L,L _(—) S_(B)):

wherein: If L_T_(x)>1, then L_T_(x):=1 else if L_T_(x)<0, thenL_T_(x):=0.Where in all of the above, buffer (x, a, b):=if x<a then f(x, a, b) elseg(x, a, b) with lightness and saturation values calculated using:

f(x,a,b):=(sin(x*pi/a−pi/2)+1)*b/2

g(x,a,b):=(sin((x−a)*pi/(1−a)+pi/2)+1)*b/2,

where x is the respective hue saturation or lightness value of thesource base color, a is the respective hue, saturation or lightness ofthe source base color, and b is the difference in the respective hue,saturation or lightness between a source color and the selected sourcebase color.

The buffer (x, a, b) prevents lightness L and saturation S fromextending outside the range of 0 to 1. If lightness L and saturation Sextend outside the range of 0 to 1, information can be lost, i.e., thecolors will be either too dark or too light. The buffer allows the shiftof dark or light colors to be reduces so these dark and light colors arenot transformed to be either darker or lighter.

Color changes according to the second scenario, i.e., a single sourcecolor with threshold, are performed using to the above-described singlesource color transformation process. However, in this second scenario, auser selects a single source color from the source colors scheme, atarget color and a threshold. The threshold can define a sphere aroundthe selected source color. For example, the selected source color can bethe center of the sphere and the threshold can be the radius. Of course,the threshold can be defined differently. Colors inside the sphere andon the sphere (i.e., at the threshold) will be transformed according tothe above process. Colors outside the sphere will not be transformed,and will be identical as they appear in the source color scheme afterthe transformation.

The multiple source colors are selected by the user from the sourcecolor scheme, and are defined by the user to correspond to a selectedsource color in the target color scheme. The selected multiple sourcecolors are transformed to the target colors using to the process for thesingle color scenario. The other colors B (i.e., the colors not selectedas source colors in the source color scheme) of the content elements inthe retrieved file must be mapped to the target color scheme. This isdone on a color-by-color basis for all colors, not just the colors thatmatch the source color, in a content element, as it is reviewed in step230 above. When this third scenario is performed, the response in step230 will always be “YES”, and proceed to step 235. The distance from thecolor B of the content element to each of the selected source colors inthe source color scheme is computed. The selected source color in thesource color scheme that is a minimum distance from the color B of thecontent element is the selected source color that will be used intransformation of the color B of the content element. These other colorsB are transformed based on the minimum distance from a selected sourcecolor and the corresponding selected color in the target color scheme.In other words, if the selected source colors are D and J, and they areselected to be transformed into P and Q, respectively, in the targetcolor scheme, and a color B has a minimum distance to D as compared toJ, then the color B will be transformed to the color P in the targetcolor scheme. The transformations are also performed according to thesingle source color transformation.

As for the fourth scenario involving multiple source colors and athreshold, it is similar to the second scenario with respect to thethreshold creating a sphere around the source color. The colortransformation is performed using process of the above-described singlesource color transformation. In addition to the selecting multiplesource colors, the user selects a threshold for each source color. Totransform an arbitrary color X that is not one of the selected multiplesource colors, the distance from X is computed to each of the multipleselected source colors. If X is outside the sphere defined by thethreshold of the source color, the distance is considered infinite. If Xis outside of all spheres of all source colors, then X remainsunchanged. The source color with the minimal distance to X is thematching source color to choose for the transformation of X. The color Xwould be transformed using the single source color transformation ofthis source color and the corresponding color for the target colorscheme.

Software modules including program instructions can be stored orembodied on machine-readable media such as discs, including CD and DVD,flash memory, hard drives including magnetic and optical drives, or anyother suitable computer readable media. The software language used towrite the software modules can be any language suitable for implementingthe described exemplary embodiments, and such languages are known tothose of skill in the art.

It should be understood that there exist implementations of othervariations and modifications of the invention and its various aspects,as may be readily apparent to those of ordinary skill in the art, andthat the invention is not limited by specific embodiments describedherein. Features and embodiments described above may be combined withand without each other. It is therefore contemplated to cover any andall modifications, variations, combinations or equivalents that fallwithin the scope of the basic underlying principals disclosed andclaimed herein.

1-11. (canceled)
 12. A user interface conversion method, comprising:responsive to a user selection of a source color and a replacementcolor, retrieving from storage data including content elements defininga user interface screen, for each content element of the user interfacescreen, comparing a color of the content element to the source color, ifthe color of the content element falls within a predetermined thresholddistance of the source color along a color palette, converting the colorof the content element to the replacement color, and followingprocessing of the content elements, displaying the user interface on adisplay device, including the converted color element(s).
 13. A userinterface conversion method, comprising: responsive to a user selectionof a source color and a replacement color, retrieving from storage datadefining a user interface screen, for each content element of the userinterface, comparing a color of the content element to the source color,if the color of the content element falls within a predeterminedthreshold distance of the source color along a color palette, convertingthe color of the content element to the replacement color; determining adistance vector separating the content element's color from the sourcecolor along the color palette, converting the color of the contentelement to a new color based on the replacement color and distancevector, and following processing of the content elements, displaying theuser interface on a display device, including the converted colorelement(s).
 14. A system for transforming a color scheme of a userinterface, comprising: a server that provides a user interface screen tothe client computer, wherein the user interface screen is defined bycontent elements; and a client computer including a display device andan input device connected to the client computer, the client computercomprising a processor configured to: in response to a user selection ofa source color and a replacement color, retrieving from storage dataincluding content elements defining a user interface screen, for eachcontent element of the user interface screen, comparing a color of thecontent element to the source color, if the color of the content elementfalls within a predetermined threshold distance of the source coloralong a color palette, converting the color of the content element tothe replacement color, and following processing of the content elements,displaying the user interface on a display device, including theconverted color element(s).
 15. A non-transitory machine-readable mediumembodied with program instructions for causing a processor to executethe program instructions, the program instructions for transforming acolor scheme of a user interface, comprising: responsive to a userselection of a source color and a replacement color, retrieving fromstorage data including content elements defining a user interfacescreen, for each content element of the user interface screen, comparinga color of the content element to the source color, if the color of thecontent element falls within a predetermined threshold distance of thesource color along a color palette, converting the color of the contentelement to the replacement color, and following processing of thecontent elements, displaying the user interface on a display device,including the converted color element(s).